<template>
  <div class="box">
    <div class="title">
      <van-icon class="icon" name="arrow-left" @click="returnFn" />
      用户须知
    </div>
    <div class="content">
      <div
        class="list"
        v-for="item in info.data"
        :key="item.id"
        @click="navGetTo(item.id)"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { getProtocolList } from "@/api/http.js";

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const returnFn = () => {
      router.go(-1);
    };
    const navGetTo = (id) => {
      router.push({
        name: "Agreement",
        query: {
          id,
        },
      });
    };
    const info = reactive({
      data: [],
    });
    const getInfo = async () => {
      const { data } = await getProtocolList();
      info.data = data;
      console.log(info);
    };

    onMounted(() => {
      getInfo();
    });

    return {
      returnFn,
      proxy,
      navGetTo,
      info,
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  min-height: 100vh;
  background-color: var(--backColorTwo);
  color: #666666;
  .title {
    width: 100%;
    height: 60px;
    font-size: 1.125rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 60px;
    position: relative;
    padding: 0 4%;
    background-color: #212121;

    .icon {
      position: absolute;
      top: 50%;
      left: 10px;
      font-size: 1.5rem;
      transform: translateY(-50%);
    }
  }
  .content {
    margin-top: 10px;

    .list {
      color: var(--textColor);
      font-size: 1rem;
      letter-spacing: 1px;
      padding: 20px 4%;
      border-bottom: 1px solid #e5e5e5;
    }
  }
}
</style>
